<template>
	<div class="leftnav" :style="{height:app.webHeight+'px'}">
		<el-collapse v-model="activeNames" @change="handleChange" :accordion="true">
		  <el-collapse-item v-for="(item,index) in navList" :key="index" :title="item.name" :name="item.alias">
			<template slot="title">
				<i :class="item.icon" style="margin-right:10px;"></i>{{item.name}}
			</template>
		    <div class="navs">
				<li v-for="(it,ind) in item.children" :key="index + '-' + ind" :class="[it.alias == $route.name ? 'active' : '']">
					<router-link :to="{name:it.alias}" tag = "div">{{it.name}}</router-link>
				</li>
			</div>
		  </el-collapse-item>
		</el-collapse>
	</div>
</template>

<script>
	import { mapState,mapGetters,mapMutations } from 'vuex'
	export default {
		data(){
			return{
				activeNames:'2',
				leftNav:'',
				height:500,
				navList:[]
			}
		},
		computed:{
			...mapState(['app','user']),
			...mapGetters(['authList'])
		},
		props:{
			// rou:{
			// 	type:Object,
			// 	default (){
			// 		return {}
			// 	}
			// }
			// isShow:{
			// 	type:Boolean,
			// 	default:true
			// }
		},
		watch: {
			$route(to,from){
				this.getLeftNav();
			}
		},
		mounted(){
			this.getLeftNav();
		},
		methods: {
			handleChange(){
				
			},
			getLeftNav(){
				const that = this;
				let arr = [];
				that.authList.forEach(function(item){
					if(item.alias == that.$route.meta.leftNav){
						arr = item.children;
					}
				})
				this.activeNames = that.$route.meta.subType;
				that.navList = arr;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leftnav{
		width:184px;
		margin-right:8px;
		float:left;
		border-radius: 4px;
		.navs{
			line-height: 36px;
			text-indent: 24px;
			li{
				
			}
			li.active{
				color:#fff;
				background:rgba(255, 255, 255, 0.3);
			}
			li:hover{
				background:rgba(255, 255, 255, 0.3);
			}
		}
	}
</style>
